<template>
  <div class="money-box">
    <div class="fl item" v-for="(item,index) in data" :key="index">
      <div style="display: flex; width: 45%;align-items: center; justify-content: flex-start;">
        <span class="flipper-span margin-right">{{item.name}}</span>
        <FlipperBig :val="item.value"></FlipperBig>
        <span class="flipper-span">万元</span>
      </div>
      <div style="display: flex; width: 32%;align-items: center; justify-content: start;">
        <span class="flipper-span margin-left">门店:</span>
        <span class="flipper-number text-yellow store">{{item.store}}</span>
        <span class="flipper-span margin-right text-yellow">家</span>
        <span class="flipper-span">较昨日</span>
        <span class="flipper-number" :class="index%3==0?'text-green':'text-red'">{{item.compare}}</span>
        <div class="up" v-if="item.type=='up'"></div>
        <div class="down" v-else></div>
      </div>
      <p style="display: flex; width: 25%;align-items: center;justify-content: flex-end;">
        <span class="flipper-span margin-left">从业人员:</span>
        <span class="flipper-number text-yellow">{{item.person}}</span>
        <span class="flipper-span text-yellow">人</span>
      </p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Money",
    props: {
      data: {
        // 返回的数据
        type: Array,
        default: function () {
          return [];
        },
      },
    },
    data() {
      return {


      }
    },
    mounted() {

    },
    beforeDestroy() {

    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
  .money-box {
    width: 100%;
    height: 100%;

    .item {
      width: 100%;
      padding: 0 2% 0 1%;
      display: flex;
      /* margin-left: 4%; */
      align-items: center;

      .margin-right {
        margin-right: 15px;
      }

      .margin-left {
        margin-left: 25px
      }

      .store {
        width: 43px;
      }
    }
  }
</style>